<template>
	<view class="reservation page bgfd">
		<view class="tabbox flex flexC aliC c66 fs15 px10 pb8 bgff mb10">
			<view class="item py8 flex1" v-for="(item,index) in tabs" :key="index" @click="clickTab(item,index)">
				<text class="p8" :class="index==currentTab?'active':''">{{item}}</text>
				<image v-if="currentTab == index" class="icon" src="/static/img/icon/sel.png" mode="widthFix"></image>
			</view>
		</view>
		<scroll-view scroll-y class="list c66 bgfd boxS">
			<user-reservation-item @cancelApplay="cancelApplay" v-for="(item,index) in list" :item="item" typeStr="1"
				:key="index"></user-reservation-item>
			<view class="py5"></view>
		</scroll-view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				tabs: ['全部', '待应约', '已完成'],
				currentTab: 0,
				page: 1,
				list: [],
				currentItem: null,
				status: '',
				isLastPage:false,
				isnodata:false
			};
		},
		onLoad() {
			this.getList();
		},
		methods: {


			cancelApplay(item){
				console.info("===item==");
				let that = this;
				uni.showModal({
					title:"取消提示",
					content:"您确定要取消约局，可能会扣除相关的费用",
					confirmText:"取消",
					cancelText:"想想",
					complete(res) {
						that.doCancel(item);
					}
				})
			},
			doCancel(item){
				
				let param = {
					id:item.id
				};
				let that = this;
				this.$api.cancelJoin(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
				
						uni.showModal({
							title:"提示",
							content:"取消成功",
							showCancel:false,
							complete() {
								that.isLastPage = false;
								that.isnodata= false;
								that.page = 1;
								that.getList();
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
				
			},

			clickTab(item, index) {
				this.currentTab = index;
				this.currentItem = item;
				if (index == 0) {
					this.status = '';
				} else if (index == 1) {
					this.status = "payed";
				} else if (index == 2) {
					this.status = "done";
				}
				this.page = 1;
				this.list = [];
				this.getList();
			},

			getList() {

				let param = {
					page: 1,
					status: this.status
				};
				let that = this;
				this.$api.joinList(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {

						let length = res.data.length;
						for (let i = 0; i < length; i++) {
							that.list.push(res.data[i]);
						}
						if (length < 10) {
							this.isLastPage = true;
						}
						if (that.list.length > 0) {
							that.isnodata = false;
						} else {
							that.isnodata = true;
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.bgfd {
		background-color: #FDFDFD;
	}

	.reservation {
		.cdc {
			color: #dcdcdc;
		}

		.tabbox {
			.item {
				position: relative;

				.active {
					color: #333;
					font-weight: 600;
				}

				.icon {
					width: 38rpx;
					height: 10rpx;
					position: absolute;
					bottom: 0;
					left: calc(50% - 19rpx);
				}
			}
		}

		.list {
			height: calc(100vh - 110rpx);
		}

		.bgfad {
			background-color: #FAD00D;
		}
	}
</style>